<template>
  <section class="my-releaseitems">
    <div
      class="choose flex flex-between flex-middle"
      @click="visibleArea = !visibleArea"
    >
      <div class="flex flex-middle">
        <img
          src="/static/images/city-icon.png"
          alt
        />
        <div>
          <div class="adr">{{areaId?areaId.name:'选择城市'}}</div>
          <div class="desc mt10">选择城市</div>
        </div>
      </div>
      <van-icon
        name="arrow"
        class="icon"
        color="#C1C4C9"
      />
    </div>
    <van-action-sheet
      :show="visibleArea"
      @close="visibleArea = false"
    >
      <van-area
        :area-list="areaList"
        @cancel="visibleArea = !visibleArea"
        @confirm="changeCity"
        :columns-num="2"
        title="选择城市"
      />
    </van-action-sheet>
    <div
      class="choose flex flex-between flex-middle"
      @click="chooseSch"
    >
      <div class="flex flex-middle">
        <img
          src="/static/images/school-icon.png"
          alt
        />
        <div>
          <div class="adr">{{school?school.schoolName:'选择学校'}}</div>
          <div class="desc mt10">选择学校</div>
        </div>
      </div>
      <van-icon
        name="arrow"
        class="icon"
        color="#C1C4C9"
      />
    </div>
    <van-action-sheet
      :show="visibleSchool"
      @close="visibleSchool = false"
    >
      <van-picker
        :columns="schoolList"
        value-key="schoolName"
        show-toolbar
        title="选择学校"
        @cancel="visibleSchool = !visibleSchool"
        @confirm="schChange"
      />
    </van-action-sheet>
    <div class="section1">
      <div @click="visibleType = !visibleType">
        <van-row>
          <van-col span="8">
            <div class="left-text1">发布类型</div>
          </van-col>
          <van-col span="15">
            <span v-if="displaceGoodsClass==1">置换</span>
            <span v-else-if="displaceGoodsClass==2">出售</span>
            <span v-else-if="displaceGoodsClass==3">求购</span>
          </van-col>
          <van-col span="1">
            <van-icon name="arrow-down" />
          </van-col>
        </van-row>
      </div>
      <van-action-sheet
        :show="visibleType"
        @close="visibleType = false"
      >
        <van-picker
          :columns="typeList"
          show-toolbar
          title="发布类型"
          @cancel="visibleType = !visibleType"
          @confirm="typeChange"
        />
      </van-action-sheet>
      <div>
        <van-row>
          <van-col span="8">
            <div class="left-text">物品名称</div>
          </van-col>
          <van-col span="16">
            <input
              v-model="productName"
              class="right-text"
              type="text"
              :maxlength="20"
              placeholder-style="color:#C1C4C9"
              placeholder="请输入物品名称"
            />
          </van-col>
        </van-row>
      </div>
      <div>
        <van-row>
          <van-col span="8">
            <div class="left-text">物品价格</div>
          </van-col>
          <van-col span="16">
            <input
              v-model="price"
              class="right-text"
              type="number"
              :maxlength="10"
              placeholder-style="color:#C1C4C9"
              placeholder="请输入物品价格"
            />
          </van-col>
        </van-row>
      </div>
      <div>
        <van-row>
          <van-col span="8">
            <div class="left-text">发布数量</div>
          </van-col>
          <van-col span="16">
            <input
              v-model="nums"
              class="right-text"
              type="number"
              :maxlength="10"
              placeholder-style="color:#C1C4C9"
              placeholder="请输入发布数量"
            />
          </van-col>
        </van-row>
      </div>
      <div @click="visibleQuality = !visibleQuality">
        <van-row>
          <van-col span="8">
            <div class="left-text1">物品成色</div>
          </van-col>
          <van-col span="15">
            <span v-if="quality==1">全新</span>
            <span v-else-if="quality==2">九成</span>
            <span v-else-if="quality==3">八成</span>
            <span v-else-if="quality==4">七成</span>
            <span v-else-if="quality==5">六成</span>
            <span v-else-if="quality==6">五成</span>
          </van-col>
          <van-col span="1">
            <van-icon name="arrow-down" />
          </van-col>
        </van-row>
      </div>
      <van-action-sheet
        :show="visibleQuality"
        @close="visibleQuality = false"
      >
        <van-picker
          :columns="qualityList"
          show-toolbar
          title="物品成色"
          @cancel="visibleQuality = !visibleQuality"
          @confirm="qualityChange"
        />
      </van-action-sheet>
    </div>
    <!-- 物品主图 -->
    <div class="reference">
      <div class="font1">物品主图</div>
      <div class="imgs flex">
        <img
          v-if="frontImgUrl"
          :src="frontImgUrl"
          @click="preImg(frontImgUrl,1)"
          class="img"
        />
        <div
          class="upimg flex-col flex-around flex-middle"
          @click="mainImgUp"
        >
          <img src="/static/images/upimg.png" />
          <span>{{frontImgUrl ? '重新上传' : '上传主图'}}</span>
        </div>
      </div>
    </div>

    <!-- 物品介绍 -->
    <div class="jieshao">物品介绍</div>
    <div class="reference">
      <!-- <textarea
        v-if="!visibleQuality && !visibleType && !visibleSchool && !visibleArea"
        v-model="productDtl"
        class="font2"
        placeholder="请输入物品介绍"
      ></textarea> -->
      <textarea
        v-if="showTextarea"
        v-model="productDtl"
        placeholder="请输入物品介绍"
        placeholder-style="font-size:12px;font-weight:500;color:rgba(46,46,46,1);"
        class="font2"
        auto-focus="true"
        @blur="showTextarea=!showTextarea"
      />
      <div class="font2" v-else @click="showTextarea=!showTextarea">{{productDtl || '请输入物品介绍'}}</div>
      <div class="imgs flex">
        <div class="img-wrap" v-for="(item, index) in productImg" :key="item">
          <img :src="item" class="img" @click="preImg(item)"/>
          <van-icon class="del-btn" name="clear" @click="delImg(index)"/>
          <!-- <div class="del-btn" @click="delImg(index)">删除</div> -->
        </div>
        <div
          class="upimg flex-col flex-around flex-middle"
          @click="productImgUp"
          v-if="productImg.length<3"
        >
          <img src="/static/images/upimg.png" alt />
          <span>{{productImg.length}}/3</span>
        </div>
      </div>
    </div>
    <div class="footer">
    <button class="release" @click="issueGoods">确认发布</button>
    </div>
  </section>
</template>
<script>
import areaList from "../../../common/js/city.js";
import Toast from "./../../../../static/vant-weapp/dist/toast/toast";
export default {
  data() {
    return {
      showTextarea:false,
      areaList,
      visibleArea: false,
      areaId: "", //区域{code,name }
      visibleSchool: false,
      typeList: [
        { text: "置换", id: 1 },
        { text: "出售", id: 2 },
        { text: "求购", id: 3 }
      ],
      school: "",
      schoolList: "",
      visibleType: false,
      visibleQuality: false,
      qualityList: [
        { text: "全新", id: 1 },
        { text: "九成", id: 2 },
        { text: "八成", id: 3 },
        { text: "七成", id: 4 },
        { text: "六成", id: 5 },
        { text: "五成", id: 6 }
      ],
      productName: "",
      price: "",
      displaceGoodsClass: 1,
      frontImgUrl: "", //主图
      quality: 1,
      productDtl: "",
      productImg: [],
      nums: "",
      schoolId: ""
    };
  },
  methods: {
    routerTo(id) {
      wx.navigateTo({ url: "../runlegdetail/main?id=" + id });
    },
    chooseSch() {
      if (!this.areaId) {
        Toast("请先选择城市");
      } else {
        this.visibleSchool = !this.visibleSchool;
      }
    },
    //物品成色
    qualityChange(e) {
      this.quality = e.target.value.id;
      this.visibleQuality = !this.visibleQuality;
    },
    //发布类型
    typeChange(e) {
      this.displaceGoodsClass = e.target.value.id;
      this.visibleType = !this.visibleType;
    },
    //选择学校确认
    schChange(e) {
      this.school = e.target.value;
      this.schoolId = e.target.value.schoolId;
      this.$setStorage('schoolInfo', e.target.value);
      this.visibleSchool = !this.visibleSchool;
    },
    changeCity(e) {
      this.areaId = e.target.values[1];
      this.$setStorage('jobCity', e.target.values[1]);
      this.getSchoolListByArea();
      this.visibleArea = !this.visibleArea;
    },
    //区域选择学校列表
    getSchoolListByArea() {
      this.$api.getSchoolListByArea({ areaId: this.areaId.code }).then(res => {
        const schoolInfo = this.$getStorage('schoolInfo');
        this.school = schoolInfo;
        this.schoolId = schoolInfo.schoolId;
        this.schoolList = res.data.schoolList;
      });
    },
    //主图上传
    mainImgUp() {
      var _this = this;
      wx.showLoading({
        title: '加载中',
      });
      wx.chooseImage({
        count: 1,
        success(res) {
          let path = res.tempFilePaths[0];
          let FSM = wx.getFileSystemManager();
          let base64Str = FSM.readFileSync(path, "base64");
          let imgType = res.tempFilePaths[0].substring(
            res.tempFilePaths[0].lastIndexOf(".")
          );
          _this.uploadImg(base64Str, imgType).then(res => {
            _this.frontImgUrl = res.data.imgUrl;
          });
        },
        complete() {
          wx.hideLoading();
        }
      });
    },
    preImg(url, type) {
      if (type) {
        wx.previewImage({
          current: url, // 当前显示图片的http链接
          urls: this.frontImgUrl.split() // 需要预览的图片http链接列表
        })
      } else {
        wx.previewImage({
          current: url, // 当前显示图片的http链接
          urls: this.productImg // 需要预览的图片http链接列表
        })
      }
    },
    delImg(index) {
      this.productImg.splice(index, 1);
    },
    //多图上传
    productImgUp() {
      var _this = this;
      wx.showLoading({
        title: '加载中',
      });
      wx.chooseImage({
        count: 1,
        success(res) {
          let path = res.tempFilePaths[0];
          let FSM = wx.getFileSystemManager();
          let base64Str = FSM.readFileSync(path, "base64");
          let imgType = res.tempFilePaths[0].substring(
            res.tempFilePaths[0].lastIndexOf(".")
          );
          _this.uploadImg(base64Str, imgType).then(res => {
            if (_this.productImg.length < 3) {
              _this.productImg = _this.productImg.concat(res.data.imgUrl);
            }
          });
        },
        complete() {
          wx.hideLoading();
        }
      });
    },
    //图片上传公共接口
    uploadImg(base64Str, imgType) {
      return new Promise((resolve, reject) => {
        this.$api.uploadImg({ base64Str, imgType }).then(res => {
          resolve(res);
        });
      });
    },
    //发布
    issueGoods() {
      if (!this.productName.trim()) {
        wx.showToast({
          title: '物品名称不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!(Number(this.price) > 0)) {
        wx.showToast({
          title: '价格不正确',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!(Number(this.nums) > 0)) {
        wx.showToast({
          title: '数量不正确',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.schoolId) {
        wx.showToast({
          title: '请选择学校',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.frontImgUrl) {
        wx.showToast({
          title: '物品主图不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      let params = {
        productName: this.productName, //产品名称
        price: this.price, //价格
        displaceGoodsClass: this.displaceGoodsClass, //置换物品分类 1: 置换 2：出售3：求购
        frontImgUrl: this.frontImgUrl, //产品封面图,
        quality: this.quality, //成色，1.全新，2.九成，3八成，4.七成，5六成，6.五成
        productDtl: this.productDtl, //物品介绍
        productImg: this.productImg.toString(), //图片，多图以逗号分隔（最多传三张图）
        nums: this.nums, //数量
        schoolId: this.schoolId //学校id
      };
      this.$api.issueGoods(params).then(res => {
        if (res.msg == "成功") {
          wx.showToast({
            title: "发布成功", //提示的内容,
            icon: "success", //图标,
            duration: 1000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              wx.navigateBack({
                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
              });
            }
          });
        }
      });
    }
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
    const jobCity = this.$getStorage('jobCity');
    if (jobCity) {
      this.areaId = jobCity;
      this.$nextTick(() => {
        this.getSchoolListByArea();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-releaseitems {
  padding-bottom: 60px;
  .choose {
    margin: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    img {
      width: 36px;
      height: 36px;
      margin-right: 15px;
    }
    .icon {
      width: 9px;
      height: 15px;
    }
    .adr {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
  }
  .section1 {
    margin: 15px;
    background: white;
    padding: 0 10px;
    .left-text {
      height: 20px;
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 20px;
    }
    .left-text1 {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 13px;
    }
    .right-text {
      height: 13px;
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 13px;
    }
    & > div {
      padding: 15px 0;
      img {
        width: 14px;
        height: 14px;
        background: #f7f7f7;
        vertical-align: baseline;
        margin-right: 6px;
      }
      span {
        vertical-align: baseline;
      }
      .number {
        width: 20px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    & > div:not(:last-child) {
      border-bottom: 1px solid #f2f2f2;
    }
  }
  .jieshao {
    margin-left: 15px;
  }
  .reference {
    padding: 15px 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    margin: 15px;
    textarea {
      height: 70px;
    }
    .font1 {
      margin-bottom: 15px;
    }
    .font2{
      height: 60px;
      font-size:12px;
      font-weight:500;
      color:rgba(46,46,46,1);
      line-height:13px;
    }
    .img {
      width: 60px;
      height: 60px;
      border-radius: 1px;
      &:not(:last-child) {
        margin-right: 9px;
      }
    }
    .imgs {
      padding-top: 10px;
      .img-wrap {
        position: relative;
        .del-btn {
          font-size: 15px;
          color: $secondary;
          position: absolute;
          right: 0px;
          top: -10px;
        }
      }
      .upimg {
        width: 60px;
        height: 60px;
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        line-height: 18px;
        border: 1px solid rgba(193, 196, 201, 1);
        border-radius: 1px;
        img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  .footer {
    background: #f7f7f7;
    width: 100%;
    .release {
      width: 345px;
      height: 44px;
      background: rgba(59, 184, 253, 1);
      color: white;
      border-radius: 5px;
      padding: 0;
      text-align: center;
      margin-bottom: 15px;
    }
  }
  .desc {
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(193, 196, 201, 1);
  }
  .icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
.van-icon {
  vertical-align: middle;
}
</style>
